<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="he">
        <div class="shu">
            1
        </div>
        <div class="shu">
            2
        </div>
        <div class="shu">
            3
        </div>
        <div class="shu">
            4
        </div>
        <div class="shu">
            5
        </div>
        <div class="shu">
            6
        </div>
        <div class="shu">
            7
        </div>
        <div class="shu">
            8
        </div>
        <div class="shu">
            9
        </div>
        <div class="shu">
            10
        </div>
        <div class="shu">
            11
        </div>
        <div class="shu">
            12
        </div>
    </div>
    <div class="he1">
        <div class="zi" style="display: block;">
            1月节日元旦：1月1日至3日放假三天
        </div>
        <div class="zi">
            2月节日2月2日至8日放假7天。
        </div>
        <div class="zi">
            3月节日妇女节：3月8日妇女节，与我无关。
        </div>
        <div class="zi">
            4月节日清明节：4月3日至5日放假3天
        </div>
        <div class="zi">
            5月节日劳动节：4月30日至5月2日放假3天。
        </div>
        <div class="zi">
            6月节日端午节：6月4日至6日放假3天。
        </div>
        <div class="zi">
            7月节日小暑：7月7日小暑。不放假。
        </div>
        <div class="zi">
            8月节日七夕节：8月6日七夕节。不放假。
        </div>
        <div class="zi">
            9月节日中秋节：9月10日至12日放假3天。
        </div>
        <div class="zi">
            10月节日国庆节：10月1日至7日放假7天。
        </div>
        <div class="zi">
            11月节日立冬：11月8日立冬。不放假
        </div>
        <div class="zi">
            12月节日艾滋病日:12月1日
            废除奴隶制国际日:12月2日。
        </div>
    </div>
</body>
</html>
<script>
    var he=document.querySelector(".he").querySelectorAll(".shu")
    var zi=document.querySelector(".he1").querySelectorAll(".zi")
    for (var i = 0; i < he.length; i++) {
        he[i].setAttribute("a", i)
        he[i].onmouseover = function () {
            for (var i = 0; i < he.length; i++) {
                he[i].className = '';
            }
            this.className = "current";
            var index = this.getAttribute("a");
            for (var j = 0; j < zi.length; j++) {
                zi[j].style.display = "none";
            }
            zi[index].style.display = "block"
        }

    }
</script>
<style>
    .he{
        margin: 0 auto;
        width: 400px;
        height: 320px;
        background-color: skyblue;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    .shu{
        width: 90px;
        height: 90px;
        border: 1px solid #000;
    }
    .he1{
        width: 400px;
        height: 50px;
        margin: 0 auto;
        background-color: skyblue;
    }
    .zi{
        font-size: 20px;
        font-weight: bold;
        display: none;
    }
</style>